﻿@model FTBS.Models.Entities.User
@{
    ViewBag.Title = "Xác nhận thay đổi email";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var safePass = this.Session["SafePass"];
}

<div style="background-color: white; width: 100%; min-height: 511px">
    <table style="background-color: white">
        <tr style="vertical-align: top">
            <td style="max-width: 400px">
                @Html.Partial("~/Views/Shared/_CustomerMenu.cshtml")
            </td>
            <td>
                <h2 style="font-weight: bold; text-align: center">Xác nhận thay đổi email</h2>
                <div>
                    <table class="table border" style="text-align: left; border-radius: 3px; background-color: lightyellow; max-width: 370px; margin: 0px 0px 0px 30px">
                        <tr>
                            <th>Mã an toàn
                            </th>
                            <td>
                                <input type="text" class="text-box" maxlength="6" value="" id="SafePass" name="SafePass" />
                            </td>
                            <td colspan="2" style="text-align: center">
                                <button class="metro button1" onclick="ConfirmChangeEmail()">Xác nhận</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">Hãy kiểm tra lại email cũ và sử dụng mã an toàn đã được gửi vào email gần đây nhất.</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
    <input type="hidden" id="txtSafePass" name="txtSafePass" value="@safePass"/>
    <input type="hidden" id="txtFullName" name="txtFullName" value="@Model.FullName"/>
    <input type="hidden" id="txtGender" name="txtGender" value="@Model.Gender"/>
    <input type="hidden" id="txtAge" name="txtAge" value="@Model.Age"/>
    <input type="hidden" id="txtAddress" name="txtAddress" value="@Model.Address"/>
    <input type="hidden" id="txtEmail" name="txtEmail" value="@Model.Email"/>
    <input type="hidden" id="txtPhone" name="txtPhone" value="@Model.PhoneNumber"/>
</div>

<script>
    function ConfirmChangeEmail() {
        var sPass = $("#SafePass").val();
        var safePass = $("#txtSafePass").val();
        if (sPass == "") {
            alert("Xin vui lòng nhập mã an toàn!!!");
        }
        if (safePass != sPass) {
            alert("Mã an toàn chưa đúng!!!");
        } else {
            var fullName = $("#txtFullName").val();
            var gender = $("#txtGender").val();
            var age = $("#txtAge").val();
            var address = $("#txtAddress").val();
            var email = $("#txtEmail").val();
            var phone = $("#txtPhone").val();
            $.ajax({
                url: "/Customer/EditEmail",
                type: "POST",
                data: { fullName: fullName, gender: gender, age: age, address: address, email: email, phone: phone },
                success: function (response) {
                    if (response == "Successfull") {
                        window.location.href = "/Customer/ViewCustomerAccount";
                    } else if (response == "SessionTimeOut") {
                        window.location.href = "/Home/Announcement";
                    } else {
                        alert("Thao tác thất bại, hãy thử lại!!!");
                    }
                }
            });
        }
    }
</script>

<style>
    .text-box {
        background: white;
        border: 1px solid #ffa853;
        box-shadow: 0 0 1px 1px #ffa853;
        color: #666;
        outline: none;
        height: 23px;
        width: 130px;
    }
    .metro .button1 {
        margin-top: -5px;
        -moz-box-shadow: 3px 4px 0px 0px #899599;
        -webkit-box-shadow: 3px 4px 0px 0px #899599;
        box-shadow: 3px 4px 0px 0px #899599;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
        background: -moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background: -webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background: -o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background: -ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background: linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
        background-color: #ededed;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        border: 1px solid #d6bcd6;
        display: inline-block;
        cursor: pointer;
        color: #3a8a9e;
        font-family: arial;
        font-size: 15px;
        padding: 0px 18px;
        text-decoration: none;
        text-shadow: 0px 1px 0px #e1e2ed;
    }

        .metro .button1:hover {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
            background: -moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background: -webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background: -o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background: -ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background: linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
            background-color: #bab1ba;
        }

        .metro .button1:active {
            position: relative;
            top: 1px;
        }
</style>
